<template>
    <div>
        <Header/>
        <article>
            <Slider :items="items" :cname="slider"/>
            <section class="list">
                <div class="item" v-for="item in enters" :key="item.img">
                    <router-link :to="{name: item.href}">
                        <img :src="item.img" alt="item.title">
                        <h4>{{item.title}}</h4>
                    </router-link>
                </div>
            </section>
        </article>
    </div>
</template>

<script>
    import Header from '@/components/Header.vue'
    import Slider from '@/components/Slider.vue'
    export default {
        name: "index",
        components: {
            Header,
            Slider,
        },
        data() {
            return {
                slider: 'slider',
                items: [
                    {
                        href: "home",
                        src: "//img12.360buyimg.com/jrpmobile/jfs/t1/54124/12/3394/140400/5d11e389Ee12d74f3/f3cba452b6470938.png?width=750&height=320"
                    },{
                        href: "home2",
                        src: "//img12.360buyimg.com/jrpmobile/jfs/t1/39408/33/14482/94393/5d56863eEc96b5269/563650ec7c912fbc.jpg?width=750&height=320"
                    }
                ],
                enters: [
                    {
                        href: "home",
                        img: "//img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132",
                        title: "优惠券"
                    }, {
                        href: "home",
                        img: "//img12.360buyimg.com/jrpmobile/jfs/t5590/252/875247023/17343/946aa72c/59224650N0f7ffc92.png?width=132&height=132",
                        title: "领福利"
                    },{
                        href: "home",
                        img: "//img12.360buyimg.com/jrpmobile/jfs/t4393/329/2180608902/13217/c88c0cec/58ec9dcdN1534e2d7.png?width=132&height=132",
                        title: "抢钢镚"
                    },{
                        href: "home",
                        img: "//img12.360buyimg.com/jrpmobile/jfs/t1/36242/13/119/12214/5cb06492E0c73a66f/a284f91242e27af1.png?width=90&height=90",
                        title: "领金豆"
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/element.scss";
    .slider{
        margin-top: 60px;
        img{
            width: 100%;
        }
    }
    .list{
        @include list(row);
        background: #fff;
        padding-top: 20px;
        padding-bottom: 10px;
        justify-content: space-around;
        a{
            text-decoration: none;
        }
        .item{
            text-align: center;
            img{
                display: inline-block;
                width: 45px;
                height: 45px;
            }
            h4{
                font-size: 14px;
                margin-top: 6px;
                color: #666;
            }
        }
    }
</style>